<template>
	<div class="workbench">
		<div class="lg:flex">
			<el-card class="!border-none mb-4 flex-1" shadow="never">
				<template #header>
					<div>
						<span class="card-title">今日数据</span>
						<span class="text-tx-secondary text-xs ml-4">
							更新时间：{{ workbenchData.report.time }}
						</span>
					</div>
				</template>

				<div class="flex flex-wrap">
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">在线人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.user_online_count }}</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">会员余额</div>
						<div class="text-6xl">{{ workbenchData.report.today.user_money_sum }}</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">注册人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.user_count }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日注册：{{ workbenchData.report.yes.user_count }}
						</div>
						<div class="text-tx-secondary text-xs">
							总注册：{{ workbenchData.report.totoal.user_count }}
						</div>
					</div>
					<!-- <div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">活跃人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.user_active_count }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日活跃：{{ workbenchData.report.yes.user_active_count }}
						</div>
					</div> -->
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">充值金额</div>
						<div class="text-6xl">{{ workbenchData.report.today.recharge_sum }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日充值：{{ workbenchData.report.yes.recharge_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总充值：{{ workbenchData.report.totoal.recharge_sum }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">提现金额</div>
						<div class="text-6xl">{{ workbenchData.report.today.withdraw_sum }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日提现：{{ workbenchData.report.yes.withdraw_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总提现：{{ workbenchData.report.totoal.withdraw_sum }}
						</div>
					</div>
					<!-- <div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">充提差</div>
						<div class="text-6xl">
							{{ workbenchData.report.today.recharge_sum - workbenchData.report.today.withdraw_sum }}
						</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日充提差：{{ workbenchData.report.yes.recharge_sum - workbenchData.report.yes.withdraw_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总充提差：{{ workbenchData.report.totoal.recharge_sum - workbenchData.report.totoal.withdraw_sum }}
						</div>
					</div> -->
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">充提人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.recharge_num }} |
							{{ workbenchData.report.today.withdraw_num }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日人数：{{ workbenchData.report.yes.recharge_num }} |
							{{ workbenchData.report.yes.withdraw_num }}
						</div>
						<div class="text-tx-secondary text-xs">
							总人数：{{ workbenchData.report.totoal.recharge_num }} |
							{{ workbenchData.report.totoal.withdraw_num }}
						</div>
					</div>
					<!-- <div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">首充人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.recharge_first_num }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日人数：{{ workbenchData.report.yes.recharge_first_num }}
						</div>
						<div class="text-tx-secondary text-xs">
							总人数：{{ workbenchData.report.totoal.recharge_first_num }}
						</div>
					</div> -->
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">充提笔数</div>
						<div class="text-6xl">{{ workbenchData.report.today.recharge_count }} |
							{{ workbenchData.report.today.withdraw_count }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日笔数：{{ workbenchData.report.yes.recharge_count }} |
							{{ workbenchData.report.yes.withdraw_count }}
						</div>
						<div class="text-tx-secondary text-xs">
							总笔数：{{ workbenchData.report.totoal.recharge_count }} |
							{{ workbenchData.report.totoal.withdraw_count }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">奖励金额</div>
						<div class="text-6xl">{{ workbenchData.report.today.user_reward_sum }}</div>
						<div class="text-tx-secondary text-xs">
							昨日奖励：{{ workbenchData.report.yes.user_reward_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总奖励：{{ workbenchData.report.totoal.user_reward_sum }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">质押金额</div>
						<div class="text-6xl">{{ workbenchData.report.today.order_sum }}</div>
						<div class="text-tx-secondary text-xs">
							昨日质押：{{ workbenchData.report.yes.order_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总质押：{{ workbenchData.report.totoal.order_sum }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">质押中金额</div>
						<div class="text-6xl">{{ workbenchData.report.today.order_ing_sum }}</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">质押人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.order_num }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日人数：{{ workbenchData.report.yes.order_num }}
						</div>
						<div class="text-tx-secondary text-xs">
							总人数：{{ workbenchData.report.totoal.order_num }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">质押收益</div>
						<div class="text-6xl">{{ workbenchData.report.today.order_com_sum }}</div>
						<div class="text-tx-secondary text-xs">
							昨日收益：{{ workbenchData.report.yes.order_com_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总收益：{{ workbenchData.report.totoal.order_com_sum }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">挖矿收益</div>
						<div class="text-6xl">{{ workbenchData.report.today.mine_com_sum }}</div>
						<div class="text-tx-secondary text-xs">
							昨日收益：{{ workbenchData.report.yes.mine_com_sum }}
						</div>
						<div class="text-tx-secondary text-xs">
							总收益：{{ workbenchData.report.totoal.mine_com_sum }}
						</div>
					</div>
					<div class="w-1/2 md:w-1/5 mb-4">
						<div class="leading-10">挖矿人数</div>
						<div class="text-6xl">{{ workbenchData.report.today.mine_num }}</div>
						<div class="text-tx-secondary text-xs mb-1">
							昨日人数：{{ workbenchData.report.yes.mine_num }}
						</div>
						<div class="text-tx-secondary text-xs">
							总人数：{{ workbenchData.report.totoal.mine_num }}
						</div>
					</div>
				</div>
			</el-card>
		</div>
		<div class="function mb-4">
			<el-card class="flex-1 !border-none" shadow="never">
				<template #header>
					<span>常用功能</span>
				</template>
				<div class="flex flex-wrap">
					<div v-for="item in workbenchData.menu" class="md:w-1/5 w-1/4 flex flex-col items-center"
						:key="item">
						<router-link :to="item.url" class="mb-3 flex flex-col items-center">
							<image-contain width="40px" height="40px" :src="item?.image" />
							<div class="mt-2">{{ item.name }}</div>
						</router-link>
					</div>
				</div>
			</el-card>
		</div>
		<div class="md:flex">
			<el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
				<template #header>
					<span>注册量趋势图</span>
				</template>
				<div>
					<v-charts style="height: 350px" :option="workbenchData.visitorOption" :autoresize="true" />
				</div>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup name="workbench">
	import { getWorkbench } from '@/api/app'
	import vCharts from 'vue-echarts'
	// 表单数据
	const workbenchData : any = reactive({
		version: {
			version: '', // 版本号
			website: '', // 官网
			based: '',
			channel: {
				gitee: '',
				website: ''
			}
		},
		support: [],
		report: {
			totoal: {
				recharge_sum: 0,
				withdraw_sum: 0
			},
			today: {
				recharge_sum: 0,
				withdraw_sum: 0
			},
			yes: {
				recharge_sum: 0,
				withdraw_sum: 0
			}
		}, // 今日数据
		menu: [], // 常用功能
		visitor: [], // 注册量
		article: [], // 文章阅读量

		visitorOption: {
			xAxis: {
				type: 'category',
				data: [0]
			},
			yAxis: {
				type: 'value'
			},
			legend: {
				data: ['注册量']
			},
			itemStyle: {
				// 点的颜色。
				color: 'red'
			},
			tooltip: {
				trigger: 'axis'
			},
			series: [
				{
					name: '注册量',
					data: [0],
					type: 'line',
					smooth: true
				}
			]
		}
	})

	// 获取工作台主页数据
	const getData = () => {
		getWorkbench()
			.then((res : any) => {
				workbenchData.version = res.version
				workbenchData.report = res.report
				workbenchData.menu = res.menu
				workbenchData.visitor = res.visitor
				workbenchData.support = res.support

				// 清空echarts 数据
				workbenchData.visitorOption.xAxis.data = []
				workbenchData.visitorOption.series[0].data = []

				// 写入从后台拿来的数据
				res.visitor.date.reverse().forEach((item : any) => {
					workbenchData.visitorOption.xAxis.data.push(item)
				})
				res.visitor.list[0].data.forEach((item : any) => {
					workbenchData.visitorOption.series[0].data.push(item)
				})
			})
			.catch((err : any) => {
				console.log('err', err)
			})
	}

	onMounted(() => {
		getData()
	})
</script>

<style lang="scss" scoped></style>